<template>
  <div class="student">
    <div class="head">
      <div class="head-left">课程管理</div>
      <div class="head-right">
        <div class="form">
          <el-button icon="el-icon-folder-add" @click="dialogFormVisible = true"
            >添加课程</el-button
          >
          <el-dialog title="增加课程" v-model="dialogFormVisible">
            <el-form :model="form" ref="form" style="width: 35%">
              <el-form-item label="课程名称">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="收费模式" prop="resource">
                <el-radio-group v-model="form.pricetype">
                  <el-radio label="按课时收费"></el-radio>
                  <el-radio label="按期收费"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="单价" style="display: flex">
                <el-input v-model="form.price" autocomplete="off"></el-input
                ><span>元/课时</span>
              </el-form-item>
              <el-form-item label="上课模式" prop="resource">
                <el-radio-group v-model="form.mode">
                  <el-radio label="一对一"></el-radio>
                  <el-radio label="集体班"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button
                  type="primary"
                  @click="
                    dialogFormVisible = false;
                    formadd('form');
                  "
                  >保存</el-button
                >
              </span>
            </template>
          </el-dialog>
          <el-input
            class="imput"
            placeholder="请输入课程名称"
            v-model="formpage.name"
            @blur="courselist"
            clearable
          ></el-input>
        </div>
      </div>
    </div>
    <div class="main">
      <el-dialog title="修改课程" v-model="dialogFormupdate">
        <el-form :model="form" ref="form" style="width: 35%">
          <el-form-item label="课程名称">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="收费模式" prop="resource">
            <el-radio-group v-model="form.pricetype">
              <el-radio label="按课时收费"></el-radio>
              <el-radio label="按期收费"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="单价" style="display: flex">
            <el-input v-model="form.price" autocomplete="off"></el-input
            ><span>元/课时</span>
          </el-form-item>
          <el-form-item label="上课模式" prop="resource">
            <el-radio-group v-model="form.mode">
              <el-radio label="一对一"></el-radio>
              <el-radio label="集体班"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormupdate = false">取 消</el-button>
            <el-button
              type="primary"
              @click="
                dialogFormupdate = false;
                Formupdate('form');
              "
              >修改</el-button
            >
          </span>
        </template>
      </el-dialog>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="课程名称" width="380">
        </el-table-column>
        <el-table-column prop="pricetype" label="收费模式" width="220">
        </el-table-column>
        <el-table-column
          prop="price"
          label="单价"
          width="220"
        ></el-table-column>
        <el-table-column
          prop="mode"
          label="上课模式"
          width="220"
        ></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="del(scope.row.id)">删除</el-button>
            <el-button
              type="text"
              @click="
                dialogFormupdate = true;
                Edit(scope.row.id);
              "
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="formpage.psize"
        :current-page="formpage.page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      date: "",
      tableData: [],
      dialogFormVisible: false,
      dialogFormupdate: false,
      formpage: {
        psize: 10,
        page: 1,
        name: "",
      },
      form: {
        id: "",
        name: "",
        pricetype: "",
        price: "",
        mode: "",
      },
      formLabelWidth: "120px",
    };
  },
  created() {
    this.courselist();
    // this.pageList();
  },
  methods: {
    // 每页显示多少条
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.formpage.psize = val;
      this.courselist();
    },
    // 当前显示页数
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.formpage.page = val;
      this.courselist();
    },
    // 列表数据
    async courselist() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/courses/list",
        { params: this.formpage }
      );
      console.log(res);
      this.tableData = res.data.list;
      this.total = res.data.counts;
      this.dialogFormVisible = false;
      this.dialogFormupdate = false;
      console.log(this.tableData);
    },
    // 添加
    async formadd() {
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/courses/add",
        this.form
      );
      console.log(res);
      if (res.errCode == "10000") {
        this.$message.success("添加成功");
      }
      this.courselist();
    },
    // 删除
    async del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data } = await this.$http.get(
            "http://www.eshareedu.cn/edusystems/api/courses/delete",
            {
              params: {
                id: id,
              },
            }
          );
          console.log(data);
          if (data.errCode != "10000") {
            this.$message.error("删除失败");
          }
          if (data.errCode == "10000") {
            this.$message.success("删除成功!");
          }
          this.courselist();
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 修改赋值
    Edit(id) {
      console.log(id);
      this.form.id = id;
      this.tableData.forEach((item) => {
        if (id == item.id) {
          this.form.name = item.name;
          this.form.pricetype = item.pricetype;
          this.form.price = item.price;
          this.form.mode = item.mode;
        }
      });
    },
    // 执行修改
    async Formupdate() {
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/courses/add",
        this.form
      );
      console.log(res);
      if (res.errCode == "10000") {
        this.$message.success("修改成功");
      } else {
        this.$message.error("修改失败");
      }
      this.courselist();
    },
  },
};
</script>

<style scoped>
.student {
  min-width: 950px;
  margin-left: 2%;
}

.head {
  height: 46px;
  display: flex;
}

.head .head-left {
  width: 90px;
  line-height: 46px;
  text-align: left;
  background-color: #f1f2f6;
}

.head .head-right {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: start;
  align-items: center;
  padding-left: 20px;
}

.el-button {
  font-size: 12px;
  height: 30px;
}

.form {
  width: 365px;
  height: 30px;
  display: flex;
  align-items: center;
}

.sel,
.imput {
  margin-left: 10px;
  width: 50%;
}

.main {
  margin-top: 20px;
}

.el-input__inner {
  width: 35%;
}
</style>
